<%@ page contentType="text/html;charset=UTF-8" %>
<%--<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>--%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>${fns:getConfig('productName')}登录</title>
	<link rel="icon" href="${pageContext.request.contextPath}/image/toplog.png" type="image/x-icon">
	<link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/common/jeesite.css" type="text/css" rel="stylesheet" />
	<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet"/>
	<%--<link rel="stylesheet" href="${pageContext.request.contextPath}/css/common.css" type="text/css" rel="stylesheet"/>--%>
	<%--<link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" type="text/css" rel="stylesheet"/>--%>
	<style type="text/css">
		<%--返回首页--%>
		.toback {width: 62px;background-color: #e6f3ff;color: #2196f3;}
		.toback {height: 34px;text-align: center;line-height: 34px;font-size: 14px;border-radius: 3px;margin-top: -39px;float: right;transition: all .3s;margin-top: -23px;}
		/*登录提示*/
		.alert{position:relative;width:300px;margin:0 auto;}
		.hide{display: none;}
		.alert-error {color: #bd4247;background-color: #f2bdb1;border-color: #f0a5a4;}
		.alert {padding: 8px 35px 8px 14px;text-shadow: 0 1px 0 rgba(255,255,255,0.5);border: 1px solid #efb99e;border-radius: 4px;}
		.alert .close {position: relative;top: -2px;right: -21px;line-height: 20px;}
		button.close {padding: 0;cursor: pointer;background: transparent;border: 0;-webkit-appearance: none;}
		.close {float: right;font-size: 20px;font-weight: bold;color: #000;text-shadow: 0 1px 0 #fff;opacity: 0.3;filter: alpha(opacity=20);}
		label.error {background: none;width: 270px;font-weight: normal;color: inherit;margin: 0;padding-left: 18px;padding-bottom: 2px;}
		/*验证码*/
		div.validateCode {padding-bottom:15px;}
		div.validateCode label,a{font-size: 14px;color: #969696;}
		div.validateCode input{font-size: 14px;}
	</style>

	<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/common/jeesite.js" type="text/javascript"></script>
	<script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
	<script type="text/javascript">var ctx = '${ctx}', ctxStatic='${ctxStatic}';</script>
	<style>
		a.register {
			float: right;
			padding: 0px 11px 0px 6px;
			color: #1E9FFF;
			margin-bottom: 0px;
		}
		html,body {
			height: 100%;
		}
		.w {
			width: 1000px;
		}
		.loginContainer {
			height: 100%;
			background: url('../image/bg.jpg') center / cover no-repeat;
		}
		.loginContainer .header {
			width: 100%;
			background-color: transparent;
			height: 80px;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99999;
		}
		.loginContainer .header > div {
			height: 80px;
			line-height: 80px;
			position: relative;
		}
		.loginContainer .header > div .logo {
			height: 80px;
		}
		.loginContainer .header > div .back {
			position: absolute;
			right: 0;
			top: 0;
		}
		.loginContainer .header > div .back a {
			font-size: 16px;
		}
		.loginContainer .loginBox {
			height: 100%;
			font-size: 16px;
			position: relative;
		}
		.loginContainer .loginBox .detail {
			width: 1000px;
			height: 640px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		.loginContainer .loginBox .detail .login_l {
			height: 100%;
			width: 360px;
			background: url('../layui/images/face/login.gif') left / contain no-repeat;
			background-color: #01cac2;
			position: relative;
			z-index: 5;
		}
		.loginContainer .loginBox .detail .login_l h4 {
			width: 360px;
			position: absolute;
			color: #fff;
			font-size: 24px;
			text-align: center;
			top: 480px;
		}
		.loginContainer .loginBox .detail .inputs {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			padding-left: 360px;
			box-sizing: border-box;
			background-color: #fff;
		}
		.loginContainer .loginBox .detail .inputs h3 {
			font-size: 30px;
			color: #333;
			padding: 60px 0 0 80px;
		}
		.loginContainer .loginBox .detail .inputs .t {
			font-size: 20px;
			color: #444;
			padding: 20px 0 20px 80px;
		}
		.loginContainer .loginBox .detail .inputs form {
			padding: 20px 80px;
		}
		.loginContainer .loginBox .detail .inputs form .layui-input-block {
			margin-left: 0;
		}
		.loginContainer .loginBox .detail .inputs form .layui-input-block input {
			border: none;
			border-bottom: 1px solid #ddd;
		}
		.loginContainer .loginBox .detail .inputs form span {
			font-size: 14px;
			color: #969696;
		}
		.loginContainer .loginBox .detail .inputs form .forget {
			font-size: 14px;
			color: #969696;
			float: right;
			margin-top: 10px;
		}
		.loginContainer .loginBox .detail .inputs .signUp {
			color: #4da8eb;
			position: absolute;
			bottom: 60px;
			right: 80px;
		}
		@media screen and (max-width: 1441px) {
			.w {
				width: 860px;
			}
			#detail {
				width: 860px;
				height: 500px;
			}
			#detail .login_l {
				width: 300px;
			}
			#detail .login_l h4 {
				width: 300px;
				top: 360px;
			}
			#detail .inputs {
				padding-left: 300px;
			}
			#detail .inputs h3 {
				padding-top: 40px;
			}
			#detail .inputs .t {
				padding: 20px 0 10px 80px;
			}
			#detail .signUp {
				bottom: 40px;
			}
		}
		body{
			color:#222;
		}
		.w{
			width: 1200px;
			margin: 0 auto;
		}
		.layui-form-label{
			width: 150px;
		}
		@media screen and (max-width: 1441px) {
			.w{
				width: 960px;
			}
			.layui-form-label{
				width: 100px;
			}
		}


		a:hover{
			color: #4da8eb;
		}
		.layui-form-radio>i:hover, .layui-form-radioed>i{color:#4da8eb}
		.BT{
			position:relative;
		}
		.BT::before{
			content:"*";
			display:block;
			color:#f64619;
			width:10px;
			height:10px;
			position:absolute;
			right:12px;
			top:0;
		}

	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#iconOk").click(function () {
				if($(this).parent().hasClass('layui-form-checked')){
					$(this).parent().removeClass("layui-form-checked");
					$("#rememberMe").attr("checked", false);
				}else{
					$(this).parent().addClass("layui-form-checked");
					$("#rememberMe").attr("checked", true);
				}
			});

			$("#loginForm").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					username: {required: "请填写用户名."},password: {required: "请填写密码."},
					validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
				},
				errorLabelContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
				}
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
	</script>
</head>

<body>
<div class="loginContainer">
	<div class="header">
		<div class="w">
			<div class="logo">
				<%--<a href="#">--%>
				<%--<img src="${pageContext.request.contextPath}/image/logo.png" alt="">--%>
				<%--</a>--%>
			</div>
			<%--<div class="toback">--%>
			<%--<a href="${pageContext.request.contextPath}/html/index.jsp">返回首页</a>--%>
			<%--</div>--%>
		</div>
	</div>
	<div class="loginBox w">
		<div class="detail" id='detail'>
			<div class="login_l">
				<h4>车位检测与引导控制系统</h4>
			</div>
			<div class="logins inputs">
				<h3>欢迎登录</h3>
				<h5 class="t">车位检测与引导控制系统</h5>
				<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
					<button data-dismiss="alert" class="close">×</button>
					<label id="loginError" class="error">${message}</label>
				</div>
				<form class="layui-form" lay-filter="" style="" action="${ctx}/login" method="post">
					<div class="layui-form-item">
						<div class="layui-block">
							<span>账号</span>
							<div class="layui-input-block">
								<input type="text" lay-verify="required" class="layui-input" id="username" name="username" >
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-block">
							<span>密码</span>
							<div class="layui-input-block">
								<input type="password" lay-verify="required" class="layui-input" id="password" name="password">
							</div>
							<c:if test="${isValidateCodeLogin}"><div class="validateCode">
								<label class="input-label mid" for="validateCode">验证码</label>
								<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
							</div></c:if>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="checkbox" lay-skin="primary" title="记住密码" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}>
							<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>记住密码</span><i id="iconOk" class="layui-icon layui-icon-ok"></i></div>
							<a href="#" class="forget">忘记密码</a>
						</div>
					</div>
					<%--<input type="hidden" name="mobileLogin" value="<%=upout%>">--%>
					<div>
						<input class="layui-btn layui-btn-fluid layui-btn-normal" type="submit" value="登 录"></input>
					</div>
				</form>
				<%--<div class="att" style="margin-top: 9%;">--%>
				<%--<a href="${pageContext.request.contextPath}/html/student.jsp" class="register">参赛选手注册</a>--%>
				<%--<a href="${pageContext.request.contextPath}/html/expert.jsp" class="register">专家注册</a>--%>
				<%--</div>--%>

				<%--<script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>--%>
			</div>
			<div class="forgetPwd inputs layui-hide">
				<h3>找回密码</h3>
				<form class="layui-form" lay-filter="" style="padding-top: 60px;">
					<div class="layui-form-item">
						<div class="layui-block" style="position: relative;">
							<span>账号（邮箱）</span>
							<br>
							<div class="layui-input-block">
								<input type="text" lay-verify="email" class="layui-input" name="email">
							</div>
							<div class="layui-input-inline" style="position: absolute;right: 0;top: 18px;width: auto;margin-right: 0;">
								<a class="layui-btn layui-btn-normal getnum" lay-submit>获取验证码</a>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-block">
							<span>验证码</span>
							<div class="layui-input-block">
								<input type="text"  class="layui-input" name="str">
							</div>
						</div>
					</div>
					<div style="padding-top: 30px;">
						<a class="layui-btn layui-btn-fluid layui-btn-normal saveSave" lay-submit lay-filter="commit2">下一步</a>
					</div>
				</form>
				<a href="#" class="signUp back">返回登陆</a>

			</div>
			<div class="newPwd inputs layui-hide">
				<h3>新密码</h3>
				<form class="layui-form" lay-filter="" style="padding-top: 60px;">
					<div class="layui-form-item">
						<div class="layui-block" style="position: relative;">
							<span>新密码</span>
							<div class="layui-input-block">
								<input type="password" lay-verify="required" class="layui-input pwd_1" name="passwordl" >
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-block">
							<span>再次输入密码</span>
							<div class="layui-input-block">
								<input type="password" lay-verify="required|pwd" class="layui-input pwd_2" name="nextpassword" onblur="pwd()">
							</div>
						</div>
					</div>
					<div style="padding-top: 30px;">
						<a class="layui-btn layui-btn-fluid layui-btn-normal commit_pwd" lay-submit lay-filter="commit3">确 定</a>
					</div>
				</form>
				<a href="#" class="signUp back">返回登陆</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

<script>
	var str;
	layui.use(['form', 'layer', 'upload'], function () {
		var $ = layui.jquery
				, form = layui.form
				, layer = layui.layer
				, upload = layui.upload;

		form.render();
		form.verify({
			pwd: function (v) {
				if (v !== $(".pwd_1").val()) {
					return '两次输入的新密码不同';
				}
			}
		});


		$("body").on("click", ".forget", function () {
			$(".inputs").addClass("layui-hide");
			$(".forgetPwd").removeClass("layui-hide");
		}).on("click", ".saveSave", function () {
			var num=$("input[name=str]").val();
			if(num == str){
				$(".inputs").addClass("layui-hide");
				$(".newPwd").removeClass("layui-hide");
			}else {
				layer.msg("验证码不正确");
			}

		}).on("click", ".back", function () {
			$(".inputs").addClass("layui-hide");
			$(".logins").removeClass("layui-hide");
		})

	})
	function pwd(){
		var pwd=$("input[name=passwordl]").val();
		var nextpwd=$("input[name=nextpassword]").val();
		if(pwd != nextpwd){
			layer.msg("两次密码不一致");
			return false;
		}else {
			return true;
		}

	}
	$(".commit_pwd").click(function () {
		var pwd=$("input[name=passwordl]").val();
		var nextpwd=$("input[name=nextpassword]").val();
		var email=$("input[name=email]").val();
		if(pwd == nextpwd){
			$.ajax({
				url:"${ctx}/sys/user/modifiypwd",
				type:"post",
				data:{pwd:pwd,
					email:email},
				success:function (msg) {
					if(1==msg){
						$(".inputs").addClass("layui-hide");
						$(".logins").removeClass("layui-hide");
						layer.msg("修改密码成功");
					}else{
						layer.msg("修改失败，请联系管理员");
					}


				},
				erorr:function (msg) {
					layer.msg("修改失败！");

				}
			});
		}
	});

	$(".getnum").click(function () {
		var email= $("input[name=email]").val();
		$.ajax({
			url:'${ctx}/sys/user/getnum',
			type:'post',
			data:{email:email},
			success:function(msg){
				if(12!=msg){
					str=msg;
					layer.msg("邮件已发，注意查收");
				}else {
					layer.msg("请检查邮箱是否正确");
				}
			},
			error:function (msg) {
				layer.msg("请检查邮箱是否正确");

			}
		})
	})
</script>